<% include ../header.ejs %>
<link rel="stylesheet" href="/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/select2-bootstrap-theme/dist/select2-bootstrap.min.css">
<script src="/select2/dist/js/select2.min.js"></script>

<div class="container">
    <div class="row">
        <!--左侧-->
        <div class="col-md-9">
            <!--搜索-->
            <div class="panel panel-default">
                <div class="panel-heading">搜索</div>
                <div class="panel-body">
                    <form action="/" role="form" id="searchForm">
                        <div class="form-group">
                            <input id="searchInputTitle" class="form-control" type="text" placeholder="标题搜索" value="<%= searchTitle %>">
                        </div>
                        <!--话题标题group-->
                        <div class="form-group">
                            <div style="width: 150px; display: inline-block; float: left">
                                <!--话题分类-->
                                <input id="temCategory" type="text" value="<%= searchCategory %>" hidden>
                                <select id="choiceCategory"
                                        class="select2-container select2-container--bootstrap select2-hidden-accessible"
                                        style="width: 150px;" tabindex="-1" aria-hidden="true">
                                    <option></option>
                                    <% subjects.forEach(function(subject){ %>
                                    <optgroup label="<%= subject["group"] %>">
                                        <% subject["categories"].forEach(function(category){ %>
                                        <option value="<%= category["key"] %>"><%= category["value"] %></option>
                                        <% }) %>
                                    </optgroup>
                                    <% }) %>
                                </select>
                            </div>
                            <!--标题-->
                            <div style="overflow: hidden">
                                <input type="text" value="<%= searchTags && searchTags.join(',') %>" id="tmpTags" hidden>
                                <select id="choiceTags"
                                        class="select2-container select2-container--bootstrap select2-hidden-accessible"
                                        style="width: 100%;" tabindex="-1" aria-hidden="true">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group text-left">
                            <button class="btn btn-primary">搜索</button>
                        </div>
                        <input type="text" name="wantPage" id="wantPage" value="1" hidden>
                    </form>
                </div>
            </div>
            <!--帖子列表-->
            <div class="panel panel-default">
                <div class="panel-heading" style="position: relative">
                    &nbsp;
                    <div style="display: inline-block; position: absolute; right: 10px">
                        查看:
                        <span>默认</span>
                        <span>优质帖子</span>
                        <span>最新创建</span>
                    </div>
                </div>
                <div class="panel-body" style="padding: 0">
                    <% posts.forEach(function(post){ %>
                    <% include ../sumMondules/postListItem.ejs %>
                    <% }) %>

                    <nav>
                        <ul class="pager">
                            <% if (nowPage > 1){ %>
                                <li><a id="previous" data-value="<%= nowPage - 1 %>" class="btn">上一页</a></li>
                            <% } %>
                            <% if (nowPage*20 <  allCount){ %>
                                <li><a id="next" data-value="<%= nowPage + 1 %>" class="btn">下一页</a></li>
                            <% } %>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!--右侧宣传栏-->
        <div class="col-md-3 hidden-sm hidden-xs">
            <!--发布新话题-->
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group">
                        <a class="btn btn-default" href="/posts/new">发布新话题</a>
                        <button class="btn btn-default">
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
            </div>
            <!--小贴士-->
            <div class="panel panel-default">
                <div class="panel-heading">网站</div>
                <div class="panel-body">
                    不积跬步,无以至千里;不积小流,无以成江海。
                </div>
            </div>
            <!--推荐Node资源-->
            <ul class="list-group">
                <li class="list-group-item active">推荐Node资源</li>
                <li class="list-group-item"><a href="https://www.npmjs.com/">Npm官方网站</a></li>
                <li class="list-group-item"><a href="https://nodejs.org">Node.js官网</a></li>
            </ul>
            <!--友情社区-->
            <ul class="list-group">
                <li class="list-group-item active">相关社区</li>
                <li class="list-group-item"><a href="https://cnodejs.org/" target="_blank"><img style="width: 70%"
                                                                                                src="/images/cnodejs.png"
                                                                                                alt="nodejs"></a></li>
                <li class="list-group-item"><a href="https://ruby-china.org/" target="_blank"><img style="width: 70%"
                                                                                                   src="/images/ruby-china.png"
                                                                                                   alt="ruby-china"></a>
                </li>
            </ul>
            <!--统计信息-->
            <!--<ul class="list-group">-->
                <!--<li class="list-group-item active">统计信息</li>-->
                <!--<li class="list-group-item">社区会员: 0</li>-->
                <!--<li class="list-group-item">帖子数: 0</li>-->
                <!--<li class="list-group-item">回帖数: 0</li>-->
            <!--</ul>-->
        </div>
    </div>
</div>


<% include ../footer.ejs %>

<script>
    $('#nav-posts').addClass('active');
    $( "#choiceCategory").val($('#temCategory').val());

    $("#choiceCategory").select2({
        theme: "bootstrap",
        placeholder: "选择文章分类",
        maximumSelectionSize: 6,
        // 控制显示
        templateResult: function (data) {
            return data.text;
        },
        // 选取到某个值
        templateSelection: function (data) {
            return data.text;
        }
    });

    $("#choiceTags").select2({
        theme: "bootstrap",
        placeholder: "文章包含的关键字",
        maximumSelectionLength: 5, //最多能够选择的个数
        tags: true, //是否可以自定义tag
        multiple: true // 支持多选
    });

    var isInitialedTags = false;
    $("#choiceCategory").on('change', function(){
        $('#choiceTags').children().remove();
        $('#choiceTags').val(null).trigger("change");
        var categoryKey = $(this).val();
        if (categoryKey){
            $.ajax({
                type: "GET",
                url: "/posts/api/category/tags",
                data: {category_key: categoryKey},
                success: function(tags){
                    var tmpTags = $("#tmpTags").val();
                    if (tmpTags){
                        tmpTags = tmpTags.split(',');
                        tags = arrayUniq(tags.concat(tmpTags));
                    }

                    var str = '<option></option>'
                    tags.forEach(function(tag){
                        str += "<option value='" + tag +  "'>" + tag + "</option>"
                    });
                    $('#choiceTags').append(str);

                    if (!isInitialedTags && tmpTags){
                        isInitialedTags = true;
                        $("#choiceTags").val(tmpTags).trigger('change');
                    }
                },
                error: function(){
                    return console.log('获取tags失败');
                }
            });
        }
    }).trigger('change');

    $('#previous,#next').on('click', function(){
        console.log('previous click');
        var wantPage = $(this).attr('data-value');
        console.log(wantPage);
        $('#wantPage').val(wantPage);
        $('#searchForm').submit();
    });

    $('#searchForm').submit(function (e) {
        e.preventDefault();
        var data = {
            category: $("#choiceCategory").val(),
            searchTitle: $('#searchInputTitle').val(),
            tags: $("#choiceTags").val() || [],
            page: $('#wantPage').val() || 1
        }
        location.href = '/posts?searchTitle=' + data.searchTitle + '&category=' + data.category + '&tags=' + data.tags.join(',') + '&page=' + data.page
    });

    function arrayUniq(arr){
        var obj = {};
        arr.forEach(function(e){
            obj[e] = 1;
        });
        var newArr = [];
        for (var key in obj) newArr.push(key);
        return newArr;
    }

</script>